<template>
	<div>
		<div class="selectBox">
	      <div>
	        <el-form ref="paramform" :model="searchData" size="mini"  inline>
	          <el-form-item label v-for="(item,index) in selectObj.slice(0,3)" :key="index">
	          	<!-- 根据需要显示的输入框类型进行动态显示 -->
	            <el-input :placeholder="item.name" @input="searchData[item.modelName] = verifyfilter(item.verifyTpye, searchData[item.modelName])"  v-if="item.type =='inputVerify'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
	            <el-input :placeholder="item.name"  v-if="item.type =='input'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
	            <el-select :placeholder="item.name" v-if="item.type =='select'" v-model="searchData[item.modelName]"  clearable filterable style="width:150px"  @keyup.enter.native="searchHandler">
	              <el-option v-for="opt in item.selectData" :key="opt.dictValue" :label="opt.dictLabel" :value="opt.dictValue"></el-option>
	            </el-select>
	          </el-form-item>  
	          <el-form-item>
				  <el-button @click="showOrHidden = !showOrHidden" size="mini" v-if="selectObj.length>3">高级查询<i class="el-icon-caret-bottom"></i></el-button>

				  <el-button type="primary" icon="el-icon-search" @click="searchHandler" ref="searchDom">查询</el-button>
	          </el-form-item>
	        </el-form>
	      </div>
	      <div v-if="isShowAdd">
	          <!-- 新增按钮 -->
	          <el-button size="mini" icon="el-icon-plus" @click="addFunc"></el-button>
	      </div>
	    </div>
		<div class="search_form commonSearch" v-show="showOrHidden" style="border-top: none;border-bottom: none;justify-content: start;padding-left: 5px">
			<div label v-for="(item,index) in selectObj.slice(3,20)" :key="index" >
				<!-- 根据需要显示的输入框类型进行动态显示 -->
				<el-input size="mini"  :placeholder="item.name" @input="searchData[item.modelName] = verifyfilter(item.verifyTpye, searchData[item.modelName])"  v-if="item.type =='inputVerify'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
				<el-input  size="mini"  :placeholder="item.name"  v-if="item.type =='input'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
				<el-select  size="mini"  :placeholder="item.name" v-if="item.type =='select'" v-model="searchData[item.modelName]"  clearable filterable style="width:150px"  @keyup.enter.native="searchHandler">
					<el-option size="mini"  v-for="opt in item.selectData" :key="opt.dictValue" :label="opt.dictLabel" :value="opt.dictValue"></el-option>
				</el-select>
			</div>
		</div>
	</div>
</template>

<script>

	export default {
		name: 'headerSearch',
		data() {
			return {
			   	searchData:{},
				showOrHidden:false
			}
		},
		props:{
		   // 搜索框集合
           selectObj:{
           	  type:Array,
           	  default:[]
           },
           // 是否显示新增按钮
           isShowAdd:{
           	  type:Boolean
           },
           // 查询按钮事件
           goSearchFc:{
           	  type:Function
           },
           // 新增按钮事件回传
           addFun:{
           	  type:Function
           }
		},
		activated(){
			// alert(this.$store.state.app.searchResouce)
		  if(this.$store.state.app.searchResouce =="menu"){
			this.searchData = {}
		   }
		},
		methods: {
			// 查询按钮事件
			searchHandler() {
			   this.goSearchFc(this.searchData);
			},
			// 新增按钮事件回传
			addFunc(){
               this.addFun();
			}
			
		},
			


	}
</script>
<style lang="less" scoped>
	@import "../../../../assets/searchfrom.less";

	.selectBox {
		justify-content: space-between;
		display: flex;
		background: #F5F7FA;
		border: 1px solid #e1e4eb;
		border-left: none;
		line-height: 28px;
		height: 37px;
		padding-top: 8px;
		padding-left: 14px;
		padding-right: 20px;
		border-bottom-width: 0;
        border-right-width: 0;
        border-radius: 4px 4px 0 0;
	}

</style>
